var doms = {
    container_floor_select: document.querySelector('.container-floor-select'),
    slider_container: document.querySelector('.slider-container'),
    slider: document.querySelector('.slider'),
    last_btn: document.querySelector('#last-floor'),
    next_btn: document.querySelector('#next-floor'),
    selected_floor: document.querySelector('active-floor')
};
//灵动岛的楼层选择弹出模块
var island_doms = {
    island_container: document.querySelector('#Spirit-Island .floor-pop-down'),
    floor_preview: document.querySelector('.floor-preview'),
    floor_icon_container: document.querySelector('#Spirit-Island .pop-down-icon'),
    icon: document.querySelector('#Spirit-Island .pop-down-icon use'),

}
//容器的宽度
var containerWidth = doms.slider.offsetWidth;
// console.log(containerWidth);
//每个li的宽度=盒子宽度+外边距+边框
var liWidth = doms.slider.children[0].offsetWidth + 2 * parseFloat(getComputedStyle(doms.slider.children[0]).margin);
// console.log(liWidth);
//设置偏移量offset=容器宽度+外边距+边框
var slider_containerWidth = doms.slider_container.offsetWidth;
var offset = slider_containerWidth + 2 * parseFloat(getComputedStyle(doms.slider.children[0]).margin);
// console.log(offset);

//设置最大index
var maxIndex = doms.slider.children.length;
// 楼层索引
var index = 1;
doms.slider.children[index - 1].classList.add('active-floor');
//index减少函数
function indexReduce() {
    index--;
    if (index < 1) {
        index = 1;
        alert('已经是第一层了');
    }
    //根据index更新floor-preview的内容
    island_doms.floor_preview.innerText = `${index} 楼`;

}
//index增加函数
function indexAdd() {
    index++;
    if (index > maxIndex) {
        index = maxIndex;
        alert('已经是最后一层了');
    }
    //根据index更新floor-preview的内容
    island_doms.floor_preview.innerText = `${index} 楼`;

}
//给按钮注册点击事件
//后续会添加一些函数，部分函数如跟新地图需要在这里跟新
doms.last_btn.onclick = function () {

    indexReduce();
    //使用transform属性移动slider
    doms.slider.style.transform = `translateX(${(index-1)*-offset}px)`;
    //给floor属性==index+1的楼层去除classlist中的active-floor属性
    doms.slider.children[index].classList.remove('active-floor');
    //给floor属性==index的楼层添加classlist中的active-floor属性
    doms.slider.children[index - 1].classList.add('active-floor');
}
doms.next_btn.onclick = function () {
    indexAdd();
    //使用transform属性移动slider
    doms.slider.style.transform = `translateX(${(index-1)*-offset}px)`;
    //给floor属性==index-1的楼层去除classlist中的active-floor属性
    doms.slider.children[index - 2].classList.remove('active-floor');
    //给floor属性==index的楼层添加classlist中的active-floor属性
    doms.slider.children[index - 1].classList.add('active-floor');
}

//更新地图函数




//根据index更新floor-preview的内容
island_doms.floor_preview.innerText = `${index} 楼`;

//注册点击事件
island_doms.floor_icon_container.onclick = function () {
    //获取car-map
    var carMap = document.querySelector('#box-center-top .car-map');
    //获取icon的xlink:href属性
    var xlink = island_doms.icon.getAttribute('xlink:href');
    //判断xlink是否为#icon-#icon-xiangxiazhankai-xianxingyuankuang
    /**
     * 如果是 下 则换成 上
     * 显示floor-preview
     * 把container-floor-select translate(0,60px)
     * 把carMap高度调节为113%
     * 
     * 
     */

    if (xlink == '#icon-xiangxiazhankai-xianxingyuankuang') {

        island_doms.icon.setAttribute('xlink:href', '#icon-xiangshangshouqi-xianxingyuankuang');
        island_doms.floor_preview.style.display = 'block';
        doms.container_floor_select.style.transform = 'translate(0,60px)';
        carMap.style.height = '113%';

    } else {
        island_doms.icon.setAttribute('xlink:href', '#icon-xiangxiazhankai-xianxingyuankuang');
        island_doms.floor_preview.style.display = 'none';
        doms.container_floor_select.style.transform = 'translate(0,0)';
        carMap.style.height = '100%';
    }
}